<template>
<div class="imgshow">
  <div class="imgshow-cc">
    <div class="imgshow-c">
      <img @mousewheel="scrollScale" id="dragImage" v-drag :src="imgSrc" :style="{'transform':'translate(-50%, -50%) scale('+ imgScale +') rotate('+ imgRotate +'deg)'}"/>
    </div>
  </div>
  <!-- 控制栏 -->
  <div class="imgshow-toolbar">
    <!-- 缩小 -->
    <div class="toolbar-item"><i class="el-icon-zoom-out" @click="addScale(0)"></i></div>
    <!-- 放大 -->
    <div class="toolbar-item"><i class="el-icon-zoom-in" @click="addScale(1)"></i></div>
    <!-- 重置 -->
    <div class="toolbar-item"><i class="el-icon-c-scale-to-original" @click="reset"></i></div>
    <!-- 逆时针旋转 -->
    <div class="toolbar-item"><i class="el-icon-refresh-left" @click="addRotate(-90)"></i></div>
    <!-- 顺时针 -->
    <div class="toolbar-item"><i class="el-icon-refresh-right" @click="addRotate(90)"></i></div>
  </div>
</div>
</template>

<script lang="ts">
/**
 * 图片预览组件
 * @Prop imgSrc
 * 支持放大、缩小、旋转
 */
import { Component, Prop, Vue } from 'vue-property-decorator';
@Component({
  name: 'ImagePreview',
  directives: {
    drag: {
      inserted (el) {
        el.onmousedown = (e) => {
          e.stopPropagation()
          const disx = e.pageX - el.offsetLeft
          const disy = e.pageY - el.offsetTop
          document.onmousemove = (ev) => {
            ev.preventDefault()
            el.style.left = ev.pageX - disx + 'px'
            el.style.top = ev.pageY - disy + 'px'
          }
          document.onmouseup = () => {
            document.onmousemove = document.onmouseup = null
          }
        }
      }
    }
  }
})
export default class ImagePreview extends Vue {
  @Prop(String) private imgSrc
  private imgScale: number = 1 // 缩放
  private imgRotate: number = 0 // 旋转角度

  // 控制缩放
  private addScale (val) {
    if (val) {
      if (this.imgScale < 3) {
        this.imgScale += 0.2;
      }
    } else {
      if (this.imgScale > 0.5) {
        this.imgScale -= 0.2;
      }
    }
  }

  // 控制旋转
  private addRotate (val) {
    this.imgRotate = this.imgRotate + val;
  }

  // 重置尺寸
  private reset () {
    // @ts-ignore
    document.getElementById('dragImage').style.top = '50%'
    // @ts-ignore
    document.getElementById('dragImage').style.left = '50%'
    this.imgScale = 1
    this.imgRotate = 0
  }

  // 鼠标滚轮控制缩放
  private scrollScale (e) {
    this.addScale(e.deltaY < 0)
  }
}
</script>

<style scoped>
.imgshow {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  overflow: hidden
}
.imgshow-cc {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}
.imgshow-c {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  text-align: center;
  position: relative;
  transform-origin: center;
}
.imgshow-c img {
  max-width: 100%;
  max-height: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  cursor: move;
}
.imgshow-toolbar {
  position: absolute;
  bottom: 0px;
  left: 50%;
  transform: translateX(-50%);
  line-height: 40px;
  font-size: 16px;
  background-color: #606266;
  border-radius: 30px;
  padding: 0px 20px;
}
.toolbar-item {
  width: 60px;
  float: left;
  text-align: center;
  color: #fff;
  cursor: pointer;
}
</style>
